<template>
  <div id="app">
  	<mt-header :title="msg">
     <router-link to="" slot="left">
    <mt-button @click="goback" icon="back" v-if="back" >返回</mt-button>
       </router-link>
    <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
   
 
 

  <router-view></router-view>

 
 
 	<!-- 整个系统的底部 -->
	<nav  class="mui-bar mui-bar-tab">
		<router-link class="mui-tab-item" to="/Home">
			<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
		</router-link>

		<router-link class="mui-tab-item" to="/member">
		<span class="mui-icon mui-icon-contact">
				
			</span>
			<span class="mui-tab-label">会员</span>
		</router-link>

		<router-link class="mui-tab-item" to="/shopcar">
		<span class="mui-icon mui-icon-home">
			<span id="badge" class="mui-badge">{{num}}</span>
		</span>
			<span class="mui-tab-label">购物车</span>
		</router-link>

		<router-link class="mui-tab-item" to="/search">
			<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">搜索</span>
		</router-link>
	</nav>
 



  </div>
</template>

<script>
	import  {cats} from "./kits/cat.js"
  cats.$on("num",data=>{
  	//由于vueobj和export default是不同的vue对象，所以在此处必须通过原生js来操作dom实现购物车数量的增加
		let badge = document.getElementById('badge');
		let count = badge.innerText - 0; // 获取原始值
		count+=data;  // 在原始值上增加新数据

		// 将新数据同步到dom中
		badge.innerText = count;
  	
  })
	
	
export default {
 name: 'app',
  data () {
    return {
      msg: 'Welcome to xzq vue',
      back:false,
      num:0
    }
  },
  watch: {
//  	console.log(this.$route.params)
  	$route(newval,oldval) {
//		console.log(newval)
  		this.back=newval.path==="/Home" ?false:true 
  	}
    },
  methods:{
  	goback(){
  		this.$router.go(-1);
  	}
  
  
  }
}
</script>

<style>
body{
	background-color: #fff;
	font-size: 16px;
}
.app{
	padding-bottom: 50px;
}
</style>
